<!DOCTYPE html>
<html lang="eh">
<head>
    <meta charset="UTF-8">
    <title>问卷管理</title>
    <script src="/common/common-js.js" type="application/javascript"></script>

    <style>
        .address-title {
            padding: 10px 0px;
            font-size: 26px;
            color: #eabc10;
        }

        .el-row {
            margin-bottom: 10px;
        }

        #app {
            padding: 15px;
        }

        #widthInput {
            width: 10%;
        }

    </style>

</head>
<body>
<main id="app">
    <el-row>
        <el-col :span="8">
            <el-page-header @back="exit" content="问卷管理" title="退出"/>

        </el-col>
        <el-col :span="13">
            <el-input placeholder="请输入搜索的题目" style="width:180px" v-model="param.query" clearable size="small"
                      prefix-icon="el-icon-search" @keyup.enter.native="findQuestion">
            </el-input>
            <el-button type="primary" plain size="small" icon="el-icon-search" @click="searchQuestion">查询</el-button>
        </el-col>
        <el-col :span="3">
            <el-button type="primary" plain size="small" icon="el-icon-document" @click="showDialog">添加题目</el-button>
        </el-col>
    </el-row>
    <!--表格部分-->
    <el-row>
        <el-col :span="24">

            <!-- data：这一页要显示的数据 -->
            <el-table :data="pageBean.items" max-height="95%" style="width: 100%" border>

                <!-- index指定生成序号的函数 -->
                <el-table-column
                        label="" type="index" width="60" :index="indexMethod">
                </el-table-column>

                <!--<el-table-column
                        prop="questionId" min-width="300"
                        label="问题编号">
                </el-table-column>-->

                <!-- prop 要显示的属性名 -->
                <el-table-column
                        prop="questionText" min-width="300"
                        label="问题文本">
                </el-table-column>

                <!-- prop 要显示的属性名 -->
                <!-- <el-table-column
                         prop="questionLevel" min-width="300"
                         label="问卷等级">
                 </el-table-column>-->


                <el-table-column label="操作" width="200">
                    <template slot-scope="scope">
                        <!-- scope.$index 这一行的索引号 scope.row可以传入这一行的数据 -->
                        <el-button
                                size="mini" icon="el-icon-edit" type="success" plain
                                @click="handleEdit(scope.$index, scope.row)">编辑
                        </el-button>
                        <el-button
                                size="mini"
                                type="warning" icon="el-icon-delete" plain
                                @click="handleDelete(scope.$index, scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>

            </el-table>

        </el-col>
    </el-row>

    <!-- 分页部分 -->
    <el-row>
        <el-col :span="24">
            <el-row>
                <el-col :span="24">
                    <el-pagination
                            background
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="1"
                            :page-sizes="[3,5,10]"
                            :page-size="5"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="pageBean.counts">
                    </el-pagination>
                </el-col>
            </el-row>

        </el-col>
    </el-row>

    <!--
    新增和修改对话框
    close-on-click-modal:是否可以通过点击 modal 关闭 Dialog
    visible.sync 为真表示显示，否则是隐藏
     -->
    <el-dialog title="题目管理" :visible.sync="dialogFormVisible" width="70%" @close="cancel"
               :close-on-click-modal="false">
        <!-- status-icon 为输入框添加了表示校验结果的反馈图标-->
        <!-- model 绑定的对象 rules 验证规则 ref是引用的名字 -->
        <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
            <el-row>
                <el-col :span="12">
                    <div class="grid-content bg-purple">

                        <el-form-item
                                prop="question"
                                label="题目"
                                :rules="[{ required: true, message: '请输入题目', trigger: 'blur' },
                             { type: 'string', message: '题目不能为空', trigger: ['blur', 'change'] }]"
                        >
                            <el-input v-model="dynamicValidateForm.question"></el-input>
                        </el-form-item>
                    </div>
                </el-col>

                <el-col :span="12">
                    <div class="grid-content bg-purple-light">
                        <el-form-item label="问卷等级" prop="level"
                                      :rules="[{ required: true, message: '请选择问卷的等级', trigger: 'change' }]">
                            <el-select v-model="dynamicValidateForm.level" placeholder="请选择等级">
                                <el-option label="初级" value="初级"></el-option>
                                <el-option label="中级" value="中级"></el-option>
                                <el-option label="高级" value="高级"></el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>
            </el-form-item>


            <!--          <el-row>
                          <el-col :span="12">
                              <div class="grid-content bg-purple">
                                  <el-form-item label="选项" prop="options" :rules="[{required: true, message: '请完善信息'}]">
                                      <el-input v-model="options" placeholder="请输入选项"></el-input>
                                  </el-form-item>
                              </div>
                          </el-col>

                          <el-col :span="12">
                              <div class="grid-content bg-purple-light">
                                  <el-form-item label="分值" prop="points" :rules="[{required: true, message: '请完善信息'}]">
                                      <el-input v-model="points" placeholder="请输入分值"></el-input>
                                  </el-form-item>
                              </div>
                          </el-col>
                      </el-row>
          -->

            <div class="moreRules">
                <div class="moreRulesIn" v-for="(item, index) in dynamicValidateForm.options" :key="item.key">
                    <el-row>
                        <el-col :span="8">
                            <div class="grid-content bg-purple">
                                <el-form-item label="选项" :prop="'options.' + index +'.option'"
                                              :rules="[{required: true, message: '请完善信息'}]">
                                    <el-input v-model="item.option" placeholder="请输入选项"
                                              class="el-select_box"></el-input>
                                </el-form-item>
                            </div>
                        </el-col>

                        <el-col :span="8">
                            <div class="grid-content bg-purple-light">
                                <el-form-item label="分值" :prop="'options.' + index +'.points'"
                                              :rules="[{required: true, message: '请完善信息'}]">
                                    <el-input v-model="item.points" placeholder="请输入1~10分数"
                                              class="el-select_box"
                                              onkeyup="value=value.replace(/[^0-9]/g,'');if(value>10){value=10};if(String(value)==='0'){value=1}"
                                              type="text"
                                              :maxLength="2"
                                              autocomplete="off">
                                    </el-input>
                                </el-form-item>
                            </div>
                        </el-col>

                        <el-col :span="8">
                            <div class="grid-content bg-purple">
                                <el-button @click.prevent="removeOption(item,index)">删除</el-button>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </div>


            <el-form-item>
                <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
                <el-button @click="addOptions">新增选项</el-button>
                <el-button @click="resetForm">重置</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</main>
</body>

<script type="text/javascript">
    new Vue({
        el: "#app",
        data: {
            dialogFormVisible: false,  //对话框不可见
            //查询参数
            param: {
                page: 1,
                pagesize: 5,
                query: ''  //选项
            },
            //页面对象
            pageBean: {},
            dynamicValidateForm: {
                options: [{
                    option: '',
                    points: '',
                    id: ''
                }],
                question: '',
                level: '',
                questionId: ''
            },
        },
        methods: {
            //查询所有地址
            findQuestion() {
                axios.post('/question/findAllQuestion', this.param).then(resp => {
                    this.pageBean = resp.data;
                })
            },searchQuestion(){
                axios.post('/question/search', this.param).then(resp => {
                    this.pageBean = resp.data;
                })
            },
            //第一列的行号，index从0开始
            indexMethod(index) {
                //每一页的编号
                return (this.pageBean.page - 1) * this.pageBean.pagesize + index + 1;
            },
            //改变页面大小：值是页面大小
            handleSizeChange(val) {
                //修改页面大小
                this.param.pagesize = val;
                //再次查询
                this.findQuestion();
            },
            //改变当前页：第几页
            handleCurrentChange(val) {
                //修改当前页
                this.param.page = val;
                //查询
                this.findQuestion();
            },
            //对话框的取消按钮
            cancel() {
                this.resetForm();
            },
            //显示对象框
            showDialog() {
                //显示出来
                this.dialogFormVisible = true;
            },
            //编辑按钮
            async handleEdit(index, row) {
                await axios.get("/question/editQuestion?questionId=" + row.questionId).then(response => {
                    let resultInfo = response.data;
                    this.dynamicValidateForm  = resultInfo.echoData;
                })
                //在控制台输出，看下数据
                console.log("索引号：" + index + "，数据：" + JSON.stringify(row));
                //显示输入窗口
                this.dialogFormVisible = true;
                console.log("form对象：" + JSON.stringify(this.dynamicValidateForm));
            },
            //删除按钮：索引位置，这一行的数据
            handleDelete(index, row) {
                console.log("这行数据：" + JSON.stringify(row));
                //操作前确认
                this.$confirm("真的要将'" + row.questionText + "'问题删除吗?", '删除操作', {
                    type: 'warning'
                }).then(() => {
                    //执行删除操作
                    axios.get("/question/removeQuestion?questionId=" + row.questionId).then(resp => {
                        let resultInfo = resp.data;
                        if (resultInfo.success) {
                            //显示信息
                            this.$message.success(resultInfo.message);
                            //重新加载数据
                            this.findQuestion();
                        }
                    });
                }).catch(() => {
                    //点取消按钮，如果什么也不做就留空，不能删除，删除后会出现错误
                });
            },
            //退出
            exit() {
                axios.get("/user/logout").then(resp => {
                    let code = resp.status;
                    if (code == 200) {
                        //也是页面跳转，将新的页面代替当前页面，不会在浏览器中缓存，不能通过后退回到address.html页面
                        location.replace("/login.html");
                    }
                })
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        //questionId不为空，表示添加数据
                        console.log("dynamicValidateForm对象：" + JSON.stringify(this.dynamicValidateForm));
                        console.log("valid对象：" + JSON.stringify(valid));
                        if (this.dynamicValidateForm.questionId === "") {
                            axios.post("/question/addAndModify", this.dynamicValidateForm).then(response => {
                                let resultInfo = response.data;
                                //判断是否更新成功
                                if (resultInfo.success) {
                                    //成功的信息
                                    this.$message.success(resultInfo.message);
                                    //对表单重置
                                    // this.$refs.dynamicValidateForm.resetFields();
                                    this.resetForm();
                                    //重新加载新的数据
                                    this.findQuestion();
                                    //关闭添加窗口
                                    this.dialogFormVisible = false;
                                } else {
                                    this.$message.error(resultInfo.message);
                                }
                            })
                        } else {
                            axios.post("/question/fixTheProblem", this.dynamicValidateForm).then(response => {
                                let resultInfo = response.data;
                                //判断是否更新成功
                                if (resultInfo.success) {
                                    //成功的信息
                                    this.$message.success(resultInfo.message);
                                    //对表单重置
                                    // this.$refs.dynamicValidateForm.resetFields();
                                    this.resetForm();
                                    //重新加载新的数据
                                    this.findQuestion();
                                    //关闭添加窗口
                                    this.dialogFormVisible = false;
                                } else {
                                    this.$message.error(resultInfo.message);
                                }
                            })
                        }
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            //初始化数据
            resetForm() {
                this.dynamicValidateForm.question = '';
                this.dynamicValidateForm.level = '';
                this.dynamicValidateForm.questionId = '';
                this.dynamicValidateForm.options = [];
                this.dynamicValidateForm.options.push({
                    option: '',
                    points: ''
                })
                this.$nextTick(() => {
                    this.$refs.dynamicValidateForm.clearValidate();
                })
            },
            //删除行
            removeOption(item, index) {
                this.index = this.dynamicValidateForm.options.indexOf(item)
                if (index !== -1) {
                    this.dynamicValidateForm.options.splice(index, 1)
                }
            },
            //点击新增按钮时代码
            addOptions() {
                this.dynamicValidateForm.options.push({
                    option: '',
                    points: ''
                });
            }
        },
        mounted() {
            //页面加载就读取所有地址数据
            this.findQuestion();
        }
    });


</script>
</body>
</html>
